<template>
	<view>
		<tt-bar leftIcon="icon-back" title="" :color="status==1?'#ffffff':'#000000'" bgColor="rgba(0,0,0,0)" :showZhanwei="false"></tt-bar>
		<view class="sucessBox" v-if="status==1 ">
			<image class="logo" src="../../static/120.png"></image>
			<text class="couponTitle">找培训的红包</text>
			<text class="slogn">轻松学习，福利传递</text>
			<text class="couponValue">￥{{couponInfo.discount}}</text>
			<text class="couponLimit">满{{couponInfo.amount}}元可使用</text>
			<text class="couponTime">有效期：{{couponInfo.startTime}} - {{couponInfo.endTime}}</text>
			<button @tap="toPage" data-url="index">去使用</button>
			<text class="userTishi">红包已放入账户中，结算时展示</text>
		</view>
		
		<view class="failBox" :style="{'height':pageH+'px'}" v-if="status!=1">
			<image src="../../static/coupon2.png" mode="widthFix"></image>
			<text class="failText">{{errmsg}}</text>
		</view>
		
		<!-- <text v-if="status==1">成功</text>
		<text v-if="status==0">失败</text> -->
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components:{
			ttBar
		},
		computed: {
			...mapState({
				isLogin:state=>state.user.isLogin,
				userInfo: state => state.user.userInfo
			})
		},
		data() {
			return {
				couponId:0,
				status:0,
				pageH:uni.getSystemInfoSync().screenHeight-uni.upx2px(200),
				couponInfo:{
					discount:0,
					amount:0
				},
				errmsg:'券已飞走'
			};
		},
		methods:{
			reveiceCoupon(){
				this.$store.dispatch("apiReceiveCoupon",{
					couponId:this.couponId,
					userId:this.userInfo.userId
				}).then(res=>{
					// code:1 成功  6 领取次数已达上限   5已领完  4结束发放
					this.status=res.data.code;
					if(res.data.code==1 ){
						this.couponInfo=res.data.data.coupon;
						this.resolveData();
					}else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						this.errmsg=res.data.msg;
					}
					
				}).catch(err=>{
					// uni.showToast({
					// 	title: err.data.msg,
					// 	icon: 'none'
					// });
				})
			},
			
			resolveData(){
				this.couponInfo.startTime=this.couponInfo.startTime.replace(/-/g,'.').split(' ')[0];
				this.couponInfo.endTime=this.couponInfo.endTime.replace(/-/g,'.').split(' ')[0];
			}
		},
		onLoad(cfm) {
			if(!this.isLogin){
				
			}else{
				this.couponId=cfm.id
				this.reveiceCoupon();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.reveiceCoupon();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.sucessBox{
		width: 100%;
		display: block;
		background-image: url(../../static/coupon1.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: top center;
		display: flex;
		flex-direction: column;
		align-items: center;
		.logo{
			width: 140upx;
			height: 140upx;
			margin-top: 130upx;
			border: 1px solid #FFFFFF;
			border-radius: 20upx;
		}
		.couponTitle{
			font-size: 50upx;
			margin-top: 44upx;
			color: #202932;
		}
		.slogn{
			font-size: 32upx;
			margin-top: 10upx;
			color: #202932;
		}
		.couponValue{
			font-size: 120upx;
			color: #f1383b;
			margin: 70upx 0 120upx 0;
		}
		.couponValue:first-letter{
			font-size: 60upx;
		}
		.couponLimit{
			font-size: 32upx;
			color: #202932;
		}
		.couponTime{
			font-size: 24upx;
			color: #202932;
			margin-top: 36upx;
		}
		button{
			height: 90upx;
			line-height: 90upx;
			width: 60%;
			font-size: 40upx;
			background: linear-gradient(to bottom,#f13a3f,#f55a3e);
			color: #FFFFFF;
			border-radius: 45upx;
			margin-top: 80upx;
		}
		.userTishi{
			font-size: 24upx;
			color: #9e9e9e;
			margin-top: 100upx;
		}
	}
	.failBox{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			width: 60%;
		}
		.failText{
			color: #c3c9d6;
			font-size: 36upx;
			margin-top: 80upx;
		}
	}
</style>
